<template>
  <view class="add-outfit-page">
    <!-- 图片选择区域 -->
    <view class="image-section" @click="chooseImage">
      <image v-if="formData.image" :src="formData.image" class="preview-image" mode="aspectFill" />
      <view v-else class="upload-placeholder">
        <view class="upload-animation">
          <text class="upload-icon">📸</text>
          <text class="upload-hint">轻触上传</text>
        </view>
        <text class="upload-text">添加美美的照片吧~</text>
      </view>
      
      <!-- 图片遮罩（已上传时显示） -->
      <view v-if="formData.image" class="image-overlay">
        <view class="overlay-btn" @click.stop="chooseImage">
          <text class="overlay-icon">🔄</text>
          <text class="overlay-text">更换</text>
        </view>
      </view>
    </view>

    <!-- 表单区域 -->
    <view class="form-section">
      <view class="section-header">
        <text class="section-icon">✨</text>
        <text class="section-title">基本信息</text>
      </view>

      <!-- 品牌 -->
      <view class="form-item" @click="selectBrand">
        <view class="item-icon">🏷️</view>
        <text class="item-label">品牌</text>
        <text class="item-value" :class="{ placeholder: !formData.brand }">
          {{ formData.brand || '请选择' }}
        </text>
        <text class="arrow">›</text>
      </view>

      <!-- 位置 -->
      <view class="form-item" @click="selectLocation">
        <view class="item-icon">📍</view>
        <text class="item-label">位置</text>
        <text class="item-value" :class="{ placeholder: !formData.location }">
          {{ formData.location || '请选择' }}
        </text>
        <text class="arrow">›</text>
      </view>

      <!-- 服装尺码 -->
      <view class="form-item" @click="selectClothSize">
        <view class="item-icon">👔</view>
        <text class="item-label">服装尺码</text>
        <text class="item-value" :class="{ placeholder: !formData.clothSize }">
          {{ formData.clothSize || '请选择' }}
        </text>
        <text class="arrow">›</text>
      </view>

      <!-- 鞋码 -->
      <view class="form-item" @click="selectShoeSize">
        <view class="item-icon">👟</view>
        <text class="item-label">鞋码</text>
        <text class="item-value" :class="{ placeholder: !formData.shoeSize }">
          {{ formData.shoeSize || '请选择' }}
        </text>
        <text class="arrow">›</text>
      </view>

      <!-- 购买日期 -->
      <view class="form-item">
        <view class="item-icon">🕐</view>
        <text class="item-label">购买日期</text>
        <picker mode="date" :value="formData.purchaseDate" @change="onDateChange">
          <text class="item-value" :class="{ placeholder: !formData.purchaseDate }">
            {{ formData.purchaseDate || '请选择' }}
          </text>
        </picker>
        <text class="arrow">›</text>
      </view>

      <!-- 季节 -->
      <view class="form-item season-item">
        <view class="item-icon">❄️</view>
        <text class="item-label">季节</text>
        <view class="season-tags">
          <view 
            v-for="s in seasons" 
            :key="s"
            class="season-tag"
            :class="{ active: formData.season === s }"
            @click.stop="selectSeasonTag(s)"
          >
            <text class="season-text">{{ s }}</text>
          </view>
        </view>
      </view>

      <!-- 单选标签 -->
      <view class="form-item" @click="selectSingleTag">
        <view class="item-icon">🏷️</view>
        <text class="item-label">单选标签</text>
        <text class="item-value" :class="{ placeholder: !formData.singleTag }">
          {{ formData.singleTag || '请选择' }}
        </text>
        <text class="arrow">›</text>
      </view>

      <!-- 多选标签 -->
      <view class="form-item" @click="selectMultiTags">
        <view class="item-icon">🏷️</view>
        <text class="item-label">多选标签</text>
        <text class="item-value" :class="{ placeholder: formData.multiTags.length === 0 }">
          {{ formData.multiTags.length > 0 ? formData.multiTags.join('、') : '请选择' }}
        </text>
        <text class="arrow">›</text>
      </view>

      <!-- 分类 -->
      <view class="form-item">
        <view class="item-icon">📂</view>
        <text class="item-label">分类</text>
        <picker :value="categoryIndex" :range="categoryList" range-key="label" @change="onCategoryChange">
          <text class="item-value">{{ categoryList[categoryIndex].label }}</text>
        </picker>
        <text class="arrow">›</text>
      </view>

      <!-- 价格 -->
      <view class="form-item">
        <view class="item-icon">💰</view>
        <text class="item-label">价格</text>
        <input 
          class="item-input" 
          type="digit" 
          v-model="formData.price" 
          placeholder="请输入价格"
        />
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer-buttons">
      <view class="btn-cancel" @click="cancel">
        <text class="btn-emoji">❌</text>
        <text class="btn-text">取消</text>
      </view>
      <view class="btn-save" @click="save">
        <text class="btn-emoji">✨</text>
        <text class="btn-text">保存</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'

const formData = reactive({
  image: '',
  brand: '',
  location: '',
  clothSize: '',
  shoeSize: '',
  purchaseDate: '',
  season: '',
  singleTag: '',
  multiTags: [],
  category: 'top',
  price: '',
  wearCount: 0
})

const seasons = ['所有季节', '春', '夏', '秋', '冬']

const categoryList = [
  { label: '上装', value: 'top' },
  { label: '下装', value: 'bottom' },
  { label: '连体服装', value: 'onepiece' },
  { label: '外套', value: 'outer' },
  { label: '鞋', value: 'shoes' }
]

const categoryIndex = ref(0)

// 选择图片
function chooseImage() {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      formData.image = res.tempFilePaths[0]
      // 触觉反馈
      uni.vibrateShort({ type: 'medium' })
    }
  })
}

// 选择季节标签
function selectSeasonTag(season) {
  formData.season = season
  // 触觉反馈
  uni.vibrateShort({ type: 'light' })
}

// 选择品牌
function selectBrand() {
  uni.showActionSheet({
    itemList: ['优衣库', 'ZARA', 'H&M', '无印良品', '其他'],
    success: (res) => {
      formData.brand = ['优衣库', 'ZARA', 'H&M', '无印良品', '其他'][res.tapIndex]
    }
  })
}

// 选择位置
function selectLocation() {
  uni.showActionSheet({
    itemList: ['衣柜', '储物间', '行李箱', '其他'],
    success: (res) => {
      formData.location = ['衣柜', '储物间', '行李箱', '其他'][res.tapIndex]
    }
  })
}

// 选择服装尺码
function selectClothSize() {
  uni.showActionSheet({
    itemList: ['XS', 'S', 'M', 'L', 'XL', 'XXL'],
    success: (res) => {
      formData.clothSize = ['XS', 'S', 'M', 'L', 'XL', 'XXL'][res.tapIndex]
    }
  })
}

// 选择鞋码
function selectShoeSize() {
  const sizes = Array.from({ length: 20 }, (_, i) => (35 + i).toString())
  uni.showActionSheet({
    itemList: sizes,
    success: (res) => {
      formData.shoeSize = sizes[res.tapIndex]
    }
  })
}

// 日期变化
function onDateChange(e) {
  formData.purchaseDate = e.detail.value
  // 触觉反馈
  uni.vibrateShort({ type: 'light' })
}

// 选择单选标签
function selectSingleTag() {
  uni.showActionSheet({
    itemList: ['正式', '休闲', '运动', '居家'],
    success: (res) => {
      formData.singleTag = ['正式', '休闲', '运动', '居家'][res.tapIndex]
    }
  })
}

// 选择多选标签
function selectMultiTags() {
  // 这里可以跳转到多选页面，暂时用简单的方式
  uni.showActionSheet({
    itemList: ['夏季', '透气', '防晒', '速干', '完成'],
    success: (res) => {
      const tags = ['夏季', '透气', '防晒', '速干']
      if (res.tapIndex < 4) {
        const tag = tags[res.tapIndex]
        const index = formData.multiTags.indexOf(tag)
        if (index > -1) {
          formData.multiTags.splice(index, 1)
        } else {
          formData.multiTags.push(tag)
        }
        // 再次打开选择
        setTimeout(() => selectMultiTags(), 300)
      }
    }
  })
}

// 分类变化
function onCategoryChange(e) {
  categoryIndex.value = e.detail.value
  formData.category = categoryList[e.detail.value].value
}

// 取消
function cancel() {
  uni.navigateBack()
}

// 保存
function save() {
  if (!formData.image) {
    uni.showToast({ 
      title: '别忘了上传照片哦~', 
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  // 触觉反馈
  uni.vibrateShort({ type: 'medium' })
  
  // 生成ID
  const item = {
    id: Date.now(),
    ...formData,
    costPerWear: formData.price && formData.wearCount > 0 
      ? (parseFloat(formData.price) / formData.wearCount).toFixed(2)
      : 0
  }
  
  // 保存到本地
  const outfits = uni.getStorageSync('outfits') || []
  outfits.unshift(item)  // 添加到列表开头
  uni.setStorageSync('outfits', outfits)
  
  uni.showToast({ 
    title: '✨ 保存成功', 
    icon: 'success',
    duration: 1500
  })
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style lang="scss" scoped>
.add-outfit-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFF5F7 0%, #F3E8FF 100%);
  padding-bottom: 140rpx;
}

.image-section {
  background: #fff;
  padding: 32rpx;
  margin: 24rpx;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(255, 182, 193, 0.15);
  position: relative;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 600rpx;
  border-radius: 20rpx;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 24rpx;
  
  &:active {
    opacity: 1;
  }
}

.overlay-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 20rpx 40rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
}

.overlay-icon {
  font-size: 48rpx;
  line-height: 1;
}

.overlay-text {
  font-size: 24rpx;
  color: #8B7B8B;
  font-weight: 500;
}

.upload-placeholder {
  width: 100%;
  height: 500rpx;
  border: 3rpx dashed rgba(216, 112, 147, 0.3);
  border-radius: 20rpx;
  background: linear-gradient(135deg, #FFF5F7 0%, #F3E8FF 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.98);
    border-color: rgba(216, 112, 147, 0.5);
  }
}

.upload-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16rpx);
  }
}

.upload-icon {
  font-size: 120rpx;
  line-height: 1;
}

.upload-hint {
  font-size: 22rpx;
  color: #D87093;
  font-weight: 600;
  padding: 6rpx 16rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16rpx;
}

.upload-text {
  font-size: 28rpx;
  color: #8B7B8B;
  font-weight: 500;
}

.form-section {
  background: #fff;
  border-radius: 24rpx;
  margin: 0 24rpx 24rpx;
  padding: 0 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(255, 182, 193, 0.15);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 32rpx 0 20rpx;
  border-bottom: 2rpx solid #F3E8FF;
}

.section-icon {
  font-size: 32rpx;
  line-height: 1;
}

.section-title {
  font-size: 32rpx;
  color: #D87093;
  font-weight: 600;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #F8F9FF;
  transition: all 0.3s;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background: linear-gradient(90deg, transparent, #FFF5F7, transparent);
  }
  
  .item-icon {
    font-size: 36rpx;
    margin-right: 16rpx;
    line-height: 1;
  }
  
  .item-label {
    font-size: 28rpx;
    color: #8B7B8B;
    flex-shrink: 0;
    font-weight: 500;
  }
  
  .item-value {
    flex: 1;
    text-align: right;
    font-size: 28rpx;
    color: #333;
    margin: 0 16rpx;
    font-weight: 500;
    
    &.placeholder {
      color: #B8A8B8;
    }
  }
  
  .item-input {
    flex: 1;
    text-align: right;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
  
  .arrow {
    font-size: 32rpx;
    color: #D87093;
    font-weight: 300;
  }
}

.season-item {
  flex-wrap: wrap;
  padding: 28rpx 0;
}

.season-tags {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 16rpx;
  width: 100%;
}

.season-tag {
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #F8F9FF;
  border: 2rpx solid transparent;
  
  .season-text {
    font-size: 24rpx;
    color: #8B7B8B;
    font-weight: 500;
  }
  
  &.active {
    background: linear-gradient(135deg, #FFE5EC 0%, #F3E8FF 100%);
    border-color: rgba(216, 112, 147, 0.3);
    box-shadow: 0 4rpx 12rpx rgba(255, 182, 193, 0.25);
    transform: scale(1.05);
    
    .season-text {
      color: #D87093;
      font-weight: 600;
    }
  }
  
  &:active {
    transform: scale(0.95);
  }
}

.footer-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 20rpx;
  padding: 24rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  box-shadow: 0 -4rpx 20rpx rgba(255, 182, 193, 0.15);
  z-index: 100;
}

.btn-cancel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  background: #F8F9FF;
  color: #8B7B8B;
  border-radius: 28rpx;
  padding: 28rpx 0;
  font-size: 30rpx;
  font-weight: 600;
  border: 2rpx solid #E8E8E8;
  transition: all 0.3s;
  
  .btn-emoji {
    font-size: 28rpx;
    line-height: 1;
  }
  
  .btn-text {
    line-height: 1;
  }
  
  &:active {
    transform: scale(0.95);
    background: #F0F0F0;
  }
}

.btn-save {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  background: linear-gradient(135deg, #FFB6C1 0%, #DDA0DD 100%);
  color: #fff;
  border-radius: 28rpx;
  padding: 28rpx 0;
  font-size: 30rpx;
  font-weight: 600;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(255, 182, 193, 0.5);
  transition: all 0.3s;
  
  .btn-emoji {
    font-size: 28rpx;
    line-height: 1;
  }
  
  .btn-text {
    line-height: 1;
  }
  
  &:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.4);
  }
}
</style>

